<template>
  <div>
    <v-layout :class="{'form-header':isActive}">
      <div class="form-title">Travel allowance request form</div>
      <div class="form-btns">
        <v-btn :class="{'print-btn':isActive}"
               depressed></v-btn>
        <v-btn :class="{'submit-btn':isActive}"
               depressed
               @click="Submit">Submit
        </v-btn>
        <v-btn depressed>Delete</v-btn>
      </div>
    </v-layout>
    <v-container class="grey lighten-5">
      <v-row justify="start">
        <v-col cols="12"
               md="3"
               sm="12"><label class="from-label">Request No:</label><span
          class="form-span">{{ travelAllowance.requestNo }}</span>
        </v-col>
        <v-col cols="12"
               md="3"
               sm="12"><label class="from-label">Request Status:</label><span
          class="form-span">{{ travelAllowance.expStatus }}</span>
        </v-col>
        <v-col cols="12"
               md="3"
               sm="12"><label class="from-label">Staff Name:</label><span
          class="form-span">{{ travelAllowance.claimantStaffName }}</span>
        </v-col>
        <v-col cols="12"
               md="3"
               sm="12"><label class="from-label">Staff ID:</label><span
          class="form-span">{{ travelAllowance.claimantStaffName }}</span>
        </v-col>
      </v-row>
      <v-row justify="start">
        <v-col cols="12"
               md="3"
               sm="12"><label class="from-label">Entity:</label><span
          class="form-span"> {{ travelAllowance.claimantEntityCode }}</span>
        </v-col>
        <v-col cols="12"
               md="3"
               sm="12"><label class="from-label">Grade:</label><span
          class="form-span">{{ travelAllowance.claimantStaffGrade }}</span>
        </v-col>
        <v-col cols="12"
               md="3"
               sm="12"><label class="from-label">Line of service:</label><span
          class="form-span">{{ travelAllowance.lineOfService }}</span>
        </v-col>
        <v-col cols="12"
               md="3"
               sm="12"><label class="from-label">Operating Unite:</label><span
          class="form-span">{{ travelAllowance.claimantOfficeCode }}</span>
        </v-col>
      </v-row>
      <v-row justify="start">
        <v-col cols="12"
               md="3"
               sm="12"><label class="from-label">Office City:</label><span
          class="form-span">{{ travelAllowance.claimantOfficeBuilding }}</span>
        </v-col>
        <v-col cols="12"
               md="3"
               sm="12"><label class="from-label">Local/Expatriate:</label><span
          class="form-span">{{ travelAllowance.localExpatriate == "N" ? "Local" : "Expatriate" }}</span>
        </v-col>
        <v-col cols="12"
               md="3"
               sm="12"><label class="from-label">Creation date (DD/MM/YYY):</label>
          <span class="form-span">{{ travelAllowance.creationDate | formattingDate }}</span>
        </v-col>
      </v-row>
      <v-row justify="start">
        <v-col cols="12"
               md="3"
               sm="12">
          <div style="display: flex">
            <label class="from-label"

                   style="padding: 6px 0px;">Request Type:</label>
            <v-select v-model="travelAllowance.requestType"
                      :items="requestType"
                      dense
                      item-text="Name"
                      item-value="Id"
                      outlined></v-select>
          </div>
        </v-col>
        <v-col cols="12"
               md="6"
               sm="12">
          <div style="display: flex">
            <label class="from-label"
                   style="padding: 6px 0px;width: 16%">Client - job - office:</label>

            <v-text-field
              v-model="travelAllowance.jobProjectDesc"
              dense
              outlined
              readonly
              style="width: 84%"
              @click="openClient"
            ></v-text-field>

          </div>

        </v-col>
      </v-row>

    </v-container>

    <v-layout :class="{'form-tabs':isActive}">
      <v-tabs>
        <v-tab>Travel details</v-tab>
        <!--        <v-tab @click="attachmentTab">Attachment(s)</v-tab>-->
        <v-tab @click="historyTab">Audit history</v-tab>
        <v-tab>Approver(s)</v-tab>
        <v-tab-item>
          <traveldetails ref="traveldetails" @eventTravelallowance="eventTravelallowance"></traveldetails>
        </v-tab-item>

        <v-tab-item>
          <ul class="history-content">
            <li v-for="item in auditHistory" :key="item.logID">{{ item.actionTime + " " + item.actionContent }}</li>
          </ul>
        </v-tab-item>
        <v-tab-item>
          <table class="table form-table approver-table">
            <thead>
            <th><span>Name</span></th>
            <th><span>Grade</span></th>
            <th><span>Status</span></th>
            </thead>
            <tbody>
            <tr>
              <td></td>
              <td></td>
              <td>Approved at 2020-09-24 14:08:30</td>
            </tr>
            </tbody>
          </table>
        </v-tab-item>
      </v-tabs>

    </v-layout>
    <v-dialog v-model="submitDialog"
              width="1200">
      <v-card>
        <v-card-title class="headline red darken-3">
          Select Approver
        </v-card-title>
        <v-row>
          <v-col>
          </v-col>
        </v-row>
        <v-card-text>
          <PeoplePickerOnDB :TravelAllowanceId="travelAllowanceId"
                            @eventPeoplePicker="eventPeoplePicker"></PeoplePickerOnDB>
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary"
                 text
                 @click="submitConfirm">
            Confirm
          </v-btn>
          <v-btn color="primary"
                 text
                 @click="submitCancel">
            Cancel
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <client-picker ref="clientpicker"
                   :dialog="clientDialog"
                   :searchClient="searchClient"
                   @eventClentValue="eventClentValue"
                   @eventDialog="eventDialog"></client-picker>
  </div>
</template>

<script lang="ts">
import {Component, Vue, Watch} from "vue-property-decorator";
import {
  SearchClient,
  travelallowanceDetailSelect,
  travelallowanceDetailStaffInfo,
  travelallowanceDetailValue,
} from "@/pagetypes";
import {traveldetails} from "@/components/travelallowance";
import {ClientPicker} from "@/components/ClientPicker";
import {PeoplePickerOnDB} from "@/components/PeoplePicker";
import {GetAuditHistory, GetJobPicker, PutTravelAllowance, WorkFlowHanld} from "@/request";


@Component({
  components: {
    ClientPicker: ClientPicker,
    traveldetails: traveldetails,
    PeoplePickerOnDB,
  },
})
export default class APP extends Vue {

  submitDialog: boolean = false;
  auditHistory: any = []
  attachmentList: any = [];
  searchClient: SearchClient = {};
  clientDialog: boolean = false;
  travelAllowance: travelallowanceDetailStaffInfo = {};
  isActive: boolean = true;
  requestType: travelallowanceDetailSelect[] = [];
  travelAllowanceId: string = "";

  @Watch("travelAllowance.requestType")
  onTravelAllowanceChangeValue(val: any) {
    PutTravelAllowance(this.travelAllowance).then((res: any) => {
      console.log(res);
    })
  }

  @Watch("travelAllowance.jobProjectDesc")
  onAccordingClientChangeValue(val: any) {
    PutTravelAllowance(this.travelAllowance).then((res: any) => {
      console.log(res);
    })
  }

  async mounted() {
    this.requestType.push(
      {Id: "F", Name: "Firm"},
      {Id: "E", Name: "Client"}
    );
    this.travelAllowanceId = this.$route.params.id
  }

  submitConfirm() {
    var data: any = {};
    data.id = this.$route.params.id
    data.operation = "Submit"
    WorkFlowHanld(data).then((res: any) => {
      console.log(res);
    })
    this.submitDialog = false;
  }

  submitCancel() {
    this.submitDialog = false;
  }

  eventPeoplePicker(payload: any) {
    console.log(payload);
  }

  Submit() {
    this.$refs.traveldetails.away(false)
    setTimeout(() => {
      var table = this.$refs.traveldetails.getCurrentTable()
      if (table.length == 0) {
        return this.$message.error("请至少填写一条记录");
      }
      var flag = false;
      for (var i = 0; i < table.length; i++) {
        var x: travelallowanceDetailValue = table[i];
        x.currentModel = false
        if (this.isEmpty(x.territory)) {
          flag = true
          x.territoryEdit = true;
          x.territoryhinttext = "Please select the territory of this request"
          x.territoryColor = "deep-orange accent-3";
        }
        if (flag) {
          x.currentModel = true
          this.$refs.traveldetails.postList(table);
          return
        }
        if (this.isEmpty(x.territory)) {
          flag = true
          x.territoryEdit = true;
          x.territoryhinttext = "Please select the territory of this request"
          x.territoryColor = "deep-orange accent-3";
        } else {
          if (x.territory == "Mainland China") {
            if (this.isEmpty(x.province)) {
              flag = true
              x.provinceEdit = true;
              x.provincehinttext = "Please select the territory of this request"
              x.provinceerrorColor = "deep-orange accent-3";
            }
            if (flag) {
              x.currentModel = true
              this.$refs.traveldetails.postList(table);
              return
            }
            if (this.isEmpty(x.accomodationCity)) {
              flag = true
              x.cityEdit = true;
              x.accomodationCitylhinttext = "Please select the territory of this request"
              x.accomodationCityerrorColor = "deep-orange accent-3";
            }
            if (flag) {
              x.currentModel = true
              this.$refs.traveldetails.postList(table);
              return
            }
          }
        }
        if (flag) {
          x.currentModel = true
          this.$refs.traveldetails.postList(table);
          return
        }
        if (this.isEmpty(x.hotelName)) {
          flag = true
          x.hotelNameEdit = true;
          x.hotelhinttext = "Please select the territory of this request"
          x.hotelerrorColor = "deep-orange accent-3";
        }
        if (flag) {
          x.currentModel = true
          this.$refs.traveldetails.postList(table);
          return
        }
        if (this.isEmpty(x.checkInDate)) {
          flag = true
          x.checkInDateEdit = true;
          x.checkInDatelhinttext = "Please select the territory of this request"
          x.checkInDateerrorColor = "deep-orange accent-3";
        }
        if (flag) {
          x.currentModel = true
          this.$refs.traveldetails.postList(table);
          return
        }
        if (this.isEmpty(x.checkOutDate)) {
          flag = true
          x.checkOutDateEdit = true;
          x.checkOutDatelhinttext = "Please select the territory of this request"
          x.checkOutDateerrorColor = "deep-orange accent-3";
        }
        if (flag) {
          x.currentModel = true
          this.$refs.traveldetails.postList(table);

          return
        }


        if (x.hotelList.length == 0 && x.ticketsList.length == 0) {
          this.$message.error("请检查每条记录是否有上传附件")
          // flag = true
          return;
        }

      }
      // table.forEach((x: travelallowanceDetailValue) => {
      //
      // })
      if (!flag) {
        this.submitDialog = true;
        if (this.travelAllowance.jobCode != "") {
          var jobModel: SearchClient = {};
          jobModel.JobCode = this.travelAllowance.jobCode
          jobModel.AssgnmtID = this.travelAllowance.assgnmtID == null ? 0 : this.travelAllowance.assgnmtID
          jobModel.ExpenseType = this.travelAllowance.requestType;
          jobModel.OUCode = this.travelAllowance.claimantOfficeCode;
          jobModel.CountryCode = this.travelAllowance.countryCode;
          jobModel.ClientCode = this.travelAllowance.clientCode
          jobModel.EntityGroupCode = this.travelAllowance.entityGroupCode;
          console.log(jobModel)
          GetJobPicker(jobModel).then((res: any) => {
            console.log(res);
            if (res.data) {
              console.log(res.data)
              var staffList = [];
              res.data.forEach((x: any) => {
                this.travelAllowance.mic = x.asgMgrStaffCode
                this.travelAllowance.pic = x.asgPtrStaffCode
                PutTravelAllowance(this.travelAllowance);
              })
            }
          })
        }
      }


    }, 200)

  }

  isEmpty(obj: string): boolean {
    if (typeof obj == "undefined" || obj == null || obj == "") {
      return true;
    } else {
      return false;
    }
  }

  openClient() {
    this.searchClient.CountryCode = this.travelAllowance.countryCode;
    this.searchClient.EntityGroupCode = this.travelAllowance.entityGroupCode;
    this.searchClient.ExpenseType = this.travelAllowance.requestType;
    this.searchClient.OUCode = this.travelAllowance.claimantOfficeCode;
    this.searchClient.ClientCode = this.travelAllowance.clientCode
    this.searchClient.JobCode = this.travelAllowance.jobCode
    this.searchClient.AssgnmtID = this.travelAllowance.assgnmtID == null ? 0 : this.travelAllowance.assgnmtID
    this.searchClient.AssgProjectID = this.travelAllowance.assgnmtProjectID == null ? 0 : this.travelAllowance.assgnmtProjectID
    this.searchClient.Keyword = "N"
    this.clientDialog = true;
    this.$refs.clientpicker.SearchDefult(this.searchClient)
  }

  eventTravelallowance(payload: any) {
    this.travelAllowance = payload;
  }


  eventClentValue(payload: any) {
    let jobProjectDesc = "";
    this.travelAllowance.clientCode = payload.clientModel.clientCode;
    this.travelAllowance.clientName = payload.clientModel.clientName;
    jobProjectDesc = payload.clientModel.clientName
    if (payload.jobModel != undefined) {
      this.travelAllowance.jobCode = payload.jobModel.jobCode;
      this.travelAllowance.assgnmtID = Number(payload.jobModel.assgnmtID);

      this.searchClient.AssgnmtID = Number(payload.jobModel.assgnmtID);
      jobProjectDesc += " - " + payload.jobModel.jobCode;

    }
    if (payload.projectModel != undefined) {
      this.searchClient.AssgProjectID = Number(payload.projectModel.assgProjectID)
      this.travelAllowance.projectCode = payload.projectModel.projectCode;
      this.travelAllowance.assgnmtProjectID = Number(payload.projectModel.assgProjectID);

      jobProjectDesc += " - " + payload.projectModel.projectCode;
    }
    this.travelAllowance.jobProjectDesc = jobProjectDesc
    this.clientDialog = false;
    //

  }


  eventDialog() {
    this.clientDialog = false;
  }

  historyTab() {
    GetAuditHistory(this.$route.params.id).then((res: any) => {
      if (res.data) {
        res.data.forEach((x: any) => x.actionTime = this.dayjs(x.actionTime).format("DD/MM/YYYY HH:mm:ss"))
      }
      this.auditHistory = res.data;
    })
  }

}
</script>
<style scoped>
</style>
